<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
		<script src="../assets/flexible/flexible.debug.js"></script>
		<script src="../assets/flexible/flexible_css.debug.js"></script>
		<!--[if lt IE 9]>
	        <script src="../assets/html5shiv.min.js"></script>
			<script src="../assets/respond.min.js"></script>
	    <![endif]-->
		<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<link rel="stylesheet" href="../assets/swiper/css/swiper.min.css" />
		<link rel="stylesheet" href="../css/classify.css" />
		<link rel="stylesheet" href="../css/header.css" />
		<link rel="stylesheet" href="../css/footer.css" />
		<title>分类</title>
	</head>

	<body>
		<header class="header search">
			<div class="h-left">
				<i></i>
			</div>
			<div class="h-center box-flex input-text">
				<a class="a-search-input j-search-input" href="javascript:void(0)"></a>
				<div class="img-search"><img src="../images/index-imgs/index-img_10.png" /></div>
				<input type="text" placeholder="搜索你需要的商品" class="search" />
				<div class="img-voice"><img src="../images/index-imgs/index-img_08.png" /></div>
			</div>
			<div class="h-right">
				<i></i>
			</div>
		</header>
		<main class="main" id="app">
			<div class="menu-left scrollbar-none swiper-container" id="sidebar">
				<ul class="swiper-wrapper">
					<li v-for="opts,i in list" class="swiper-slide" v-on:click="tabIndex=i" v-bind:class="tabIndex==i?'active':''">{{opts}}</li>
				</ul>
			</div>
			<section class="menu-right padding-all j-content">
				<ul v-for="pro in products">
					<li class="swiper-container swiper-container1 w-3 lunbo" id="lunbo">
						<div class="swiper-wrapper">
							<template v-for="ids in pro.brandimgs">
								<div class="swiper-slide">
									<a href="#"><img :src="ids.imgs" /></a>
								</div>
							</template>
						</div>
					</li>
					<template v-for="lists in pro.opts">
					<h5>—— &nbsp; {{lists.titled}}  &nbsp; ——</h5>
					<li class="w-3 opts" v-for="ldet in lists.details">
						<dl>
							<dt>
			    				<a href="#"><img :src="ldet.commodity"/></a>
			    			</dt>
							<dd>{{ldet.title}}</dd>
						</dl>
					</li>
					</template>
				</ul>
			</section>
		</main>
		<footer class="footer">
			<dl>
				<dt>
					<img src="../images/footer-imgs/footer-img_home.png"/>
				</dt>
				<dd>首页</dd>
			</dl>
			<dl class="f-active">
				<dt>
					<img src="../images/footer-imgs/footer-img_clsed.png"/>
				</dt>
				<dd>分类</dd>
			</dl>
			<dl>
				<dt>
					<img src="../images/footer-imgs/footer-img_time.png"/>
				</dt>
				<dd>限时特卖</dd>
			</dl>
			<dl>
				<dt>
					<img src="../images/footer-imgs/footer-img_cart.png"/>
				</dt>
				<dd>购物车</dd>
			</dl>
			<dl>
				<dt>
					<img src="../images/footer-imgs/footer-img_Admin.png"/>
				</dt>
				<dd>用户</dd>
			</dl>
		</footer>
		<div class="search-div j-search-div ts-3">
			<section class="search">
				<div class="h-left j-close-search close-search">
					<i class="fa fa-angle-left"></i>
				</div>
				<div class="h-center">
					<div class="img-search"><img src="../images/index-imgs/index-img_10.png"/></div>
					<input type="text" placeholder="搜索你需要的商品" class="searchs"/>
				</div>
				<div class="h-right">
					搜索
				</div>
			</section>
			<section class="search-con">
				
			</section>
			<footer class="yuyin"><div class="img-voice"><img src="../images/index-imgs/index-img_08.png"/></div>点击  说出你要的宝贝</footer>
		</div>
		<script src="../assets/jquery-3.2.1.min.js"></script>
		<script src="../assets/swiper/js/swiper.jquery.min.js"></script>
		<script src="../assets/ectouch.js"></script>
		<script src="../assets/common.js"></script>
		<script src="../assets/vue/vue.min.js"></script>
		<script src="../js/classify.js"></script>
		<script src="../js/footer.js"></script>
	</body>

</html>